<template>
    <div :class="muClass">
        <slot></slot>
    </div>
</template>

<script>
    import mixins from '../../../mixins'
    export default {
        name: 'mu-menu',
        mixins: [mixins],
        data: function () {
            return {
                muClass: {
                    'mu-menu': true,
                    'mu-fixed': false
                }
            }
        },
        props: {
            mode: {
                type: String,
                default: 'vertical' // horizontal
            },
            selected: [Number, String],
            fixed: {
                type: Boolean,
                default: false
            },
            position: String
        },
        created: function () {
            this.muClass['mu-menu-' + this.mode] = true
            this.muClass['mu-fixed'] = this.fixed
            if (this.position) {
                this.muClass['mu-ps-' + this.position] = true
            }
            this.$on('mu-selected', (index) => {
                this.$children.forEach(item => {
                    item.$emit('mu-active', index)
                })
            })
        },
        mounted: function () {
            this.setItem()
        },
        activated: function () {
            this.setItem()
        },
        methods: {
            setItem: function () {
                if (this.selected) {
                    this.$children.forEach(item => {
                        item.$emit('mu-active', this.selected)
                    })
                }
            }
        }
    }

</script>
